<template>
  <div class="WorkGroupWorks page">
    <div style="padding-top: .5rem">
      <ul class="dataList" v-if="dataList.length>0">
        <li v-for="v in dataList" @click="gotowork(v.works_id)">
          <ImageBlock width="100%" height="3.2rem" :img-src="domain+'/Uploads'+v.m_path">
          </ImageBlock>
          <div class="flex">
            <div class="flex-item" style="overflow: hidden;text-align: left">
              <span class="title minifont">{{v.works_title}}</span>
            </div>
            <div class="flex-item" style="overflow: hidden;text-align: right;color: #E62323 ">
              <span class="has_work_count minifont" v-if="v.is_on_sale==2&&v.works_price"><i class="fa fa-rmb"></i>{{v.works_price}}</span>
            </div>
          </div>


        </li>
      </ul>
      <GetMore @getmore="getmore" ref="getMore"></GetMore>
    </div>
  </div>
</template>
<script>
import ImageBlock from "../../components/images/ImageBlock";
import GetMore from "../../components/buttons/GetMore";
import NoData from "../../components/tips/NoData";
export default {
  data(){
    return {
      groupId:null,
      groupName:"",
      page:1,
      dataList:[],
      getDataListDoing:0
    }
  },
  methods:{
    getmore(){
      this.page++
      this.getWorksByGroupId()
    },
    gotowork(works_id){
      window.location.href="https://topart.cn/MinProgram2/Work/detail_o?work_id="+works_id
    },
    getWorksByGroupId(){
      let _this = this
      if (_this.getDataListDoing)return false;
      _this.getDataListDoing=1
      myjs.getWorksByGroupId({page:_this.page,groupId:_this.groupId},function(data){
        _this.dataList=_this.dataList.concat(data.data)
        _this.page++
        _this.getDataListDoing=0
      },function(){
        _this.$refs.getMore.setNoMore()
        _this.getDataListDoing=0
      })
    }
  },
  beforeRouteEnter(to,from,next){
    myjs.WorkGroupVisitOnce({groupId:to.query.groupId})
    next()
  },
  mounted() {
    this.groupId = this.$route.query.groupId
    this.groupName = this.$route.query.groupName
    document.title=this.groupName
    this.getWorksByGroupId()
  },
  components:{ImageBlock,GetMore,NoData}
}
</script>
<style scoped>
ul.dataList{display: flex;flex-wrap: wrap;margin:0 auto;justify-content: space-between;padding: .4rem}
ul.dataList li{flex:1;max-width: 4.5rem;min-width: 4.5rem;position: relative;line-height:.5rem;margin-bottom:1px;
  padding: 0rem;box-sizing: border-box;
}
ul.dataList li .row{overflow: hidden}
</style>
